<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';

// 过滤选项
const dateRange = ref('lastMonth');
const department = ref('all');
const doctorType = ref('all');

// 部门选项
const departmentOptions = [
  { value: 'all', label: '全部科室' },
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'gynecology', label: '妇产科' },
  { value: 'pediatrics', label: '儿科' },
  { value: 'ophthalmology', label: '眼科' },
  { value: 'dental', label: '口腔科' }
];

// 医生类型选项
const doctorTypeOptions = [
  { value: 'all', label: '全部医生' },
  { value: 'chief', label: '主任医师' },
  { value: 'deputy', label: '副主任医师' },
  { value: 'attending', label: '主治医师' },
  { value: 'resident', label: '住院医师' }
];

// 日期范围选项
const dateRangeOptions = [
  { value: 'lastWeek', label: '上周' },
  { value: 'lastMonth', label: '上月' },
  { value: 'lastQuarter', label: '上季度' },
  { value: 'lastYear', label: '去年' },
  { value: 'custom', label: '自定义' }
];

// 自定义日期范围
const customDateRange = ref([]);
const showCustomDateRange = computed(() => dateRange.value === 'custom');

// 医生业绩表格数据
const doctorPerformanceData = ref([
  {
    id: 1,
    name: '王医生',
    department: '内科',
    title: '主任医师',
    outpatientCount: 326,
    surgeryCount: 12,
    patientSatisfaction: 96.5,
    averageRating: 4.8,
    revenue: 189500
  },
  {
    id: 2,
    name: '李医生',
    department: '外科',
    title: '副主任医师',
    outpatientCount: 189,
    surgeryCount: 38,
    patientSatisfaction: 92.8,
    averageRating: 4.6,
    revenue: 243600
  },
  {
    id: 3,
    name: '张医生',
    department: '妇产科',
    title: '主治医师',
    outpatientCount: 245,
    surgeryCount: 18,
    patientSatisfaction: 95.2,
    averageRating: 4.7,
    revenue: 176300
  },
  {
    id: 4,
    name: '陈医生',
    department: '儿科',
    title: '主任医师',
    outpatientCount: 352,
    surgeryCount: 0,
    patientSatisfaction: 98.1,
    averageRating: 4.9,
    revenue: 158200
  },
  {
    id: 5,
    name: '刘医生',
    department: '眼科',
    title: '主治医师',
    outpatientCount: 184,
    surgeryCount: 42,
    patientSatisfaction: 93.5,
    averageRating: 4.5,
    revenue: 215400
  },
  {
    id: 6,
    name: '赵医生',
    department: '口腔科',
    title: '副主任医师',
    outpatientCount: 218,
    surgeryCount: 65,
    patientSatisfaction: 91.2,
    averageRating: 4.4,
    revenue: 246800
  },
  {
    id: 7,
    name: '钱医生',
    department: '内科',
    title: '住院医师',
    outpatientCount: 196,
    surgeryCount: 0,
    patientSatisfaction: 90.6,
    averageRating: 4.3,
    revenue: 108500
  },
  {
    id: 8,
    name: '孙医生',
    department: '外科',
    title: '主治医师',
    outpatientCount: 165,
    surgeryCount: 28,
    patientSatisfaction: 94.8,
    averageRating: 4.6,
    revenue: 198700
  }
]);

// 表格排序
const sortBy = ref('revenue');
const sortOrder = ref('descending');

// 获取排序后的表格数据
const sortedDoctorData = computed(() => {
  return [...doctorPerformanceData.value].sort((a, b) => {
    const factor = sortOrder.value === 'ascending' ? 1 : -1;
    return factor * (a[sortBy.value] - b[sortBy.value]);
  });
});

// 科室医生数量统计数据
const departmentDoctorData = {
  departments: ['内科', '外科', '妇产科', '儿科', '眼科', '口腔科', '其他'],
  chief: [5, 4, 3, 2, 1, 2, 1],
  deputy: [8, 6, 4, 3, 2, 3, 2],
  attending: [12, 10, 7, 6, 4, 5, 3],
  resident: [15, 12, 8, 7, 5, 6, 4]
};

// 医生类型工作量对比数据
const doctorTypeWorkloadData = [
  { value: 35, name: '主任医师' },
  { value: 25, name: '副主任医师' },
  { value: 30, name: '主治医师' },
  { value: 10, name: '住院医师' }
];

// 医生满意度评分数据
const doctorSatisfactionData = {
  doctors: ['王医生', '李医生', '张医生', '陈医生', '刘医生', '赵医生', '钱医生', '孙医生'],
  satisfaction: [96.5, 92.8, 95.2, 98.1, 93.5, 91.2, 90.6, 94.8],
  rating: [4.8, 4.6, 4.7, 4.9, 4.5, 4.4, 4.3, 4.6]
};

// 图表实例
let departmentDoctorChart = null;
let doctorTypeWorkloadChart = null;
let doctorSatisfactionChart = null;

// 初始化图表
onMounted(() => {
  initDepartmentDoctorChart();
  initDoctorTypeWorkloadChart();
  initDoctorSatisfactionChart();
  
  // 处理窗口大小变化
  window.addEventListener('resize', handleResize);
});

// 处理窗口大小变化
const handleResize = () => {
  departmentDoctorChart && departmentDoctorChart.resize();
  doctorTypeWorkloadChart && doctorTypeWorkloadChart.resize();
  doctorSatisfactionChart && doctorSatisfactionChart.resize();
};

// 初始化科室医生分布图表
const initDepartmentDoctorChart = () => {
  const chartDom = document.getElementById('department-doctor-chart');
  departmentDoctorChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['主任医师', '副主任医师', '主治医师', '住院医师'],
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: departmentDoctorData.departments
    },
    yAxis: {
      type: 'value',
      name: '医生数量'
    },
    series: [
      {
        name: '主任医师',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: departmentDoctorData.chief
      },
      {
        name: '副主任医师',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: departmentDoctorData.deputy
      },
      {
        name: '主治医师',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: departmentDoctorData.attending
      },
      {
        name: '住院医师',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: departmentDoctorData.resident
      }
    ]
  };
  
  departmentDoctorChart.setOption(option);
};

// 初始化医生类型工作量图表
const initDoctorTypeWorkloadChart = () => {
  const chartDom = document.getElementById('doctor-type-workload-chart');
  doctorTypeWorkloadChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      formatter: '{name}'
    },
    series: [
      {
        name: '工作量占比',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: doctorTypeWorkloadData
      }
    ]
  };
  
  doctorTypeWorkloadChart.setOption(option);
};

// 初始化医生满意度评分图表
const initDoctorSatisfactionChart = () => {
  const chartDom = document.getElementById('doctor-satisfaction-chart');
  doctorSatisfactionChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['满意度(%)', '评分(5分制)'],
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: doctorSatisfactionData.doctors
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '满意度(%)',
        min: 80,
        max: 100
      },
      {
        type: 'value',
        name: '评分',
        min: 3,
        max: 5
      }
    ],
    series: [
      {
        name: '满意度(%)',
        type: 'bar',
        data: doctorSatisfactionData.satisfaction
      },
      {
        name: '评分(5分制)',
        type: 'line',
        yAxisIndex: 1,
        data: doctorSatisfactionData.rating,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3
        }
      }
    ]
  };
  
  doctorSatisfactionChart.setOption(option);
};

// 数据筛选处理
const handleFilter = () => {
  // 这里应该包含实际的数据过滤逻辑
  // 实际应用中应该发送请求获取数据
  console.log('筛选参数: ', {
    dateRange: dateRange.value,
    department: department.value,
    doctorType: doctorType.value,
    customDateRange: customDateRange.value
  });
  
  // 重新加载图表数据
  initDepartmentDoctorChart();
  initDoctorTypeWorkloadChart();
  initDoctorSatisfactionChart();
};

// 导出报表数据
const exportReport = () => {
  console.log('导出报表');
  // 实际应用中应该调用导出接口
};

// 表格排序处理
const handleSort = (prop, order) => {
  sortBy.value = prop;
  sortOrder.value = order;
};

// 查看医生详情
const viewDoctorDetail = (doctor) => {
  console.log('查看医生详情', doctor);
  // 在实际应用中应该跳转到医生详情页面
};
</script>

<template>
  <div>
    <div class="report-header">
      <h2 class="report-title">医生业绩报表</h2>
      
      <!-- 筛选器 -->
      <div class="filter-section">
        <el-form :inline="true">
          <el-form-item label="统计周期">
            <el-select v-model="dateRange" placeholder="选择统计周期" @change="handleFilter">
              <el-option
                v-for="item in dateRangeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item v-if="showCustomDateRange" label="自定义日期">
            <el-date-picker
              v-model="customDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleFilter"
            />
          </el-form-item>
          
          <el-form-item label="科室">
            <el-select v-model="department" placeholder="选择科室" @change="handleFilter">
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="医生类型">
            <el-select v-model="doctorType" placeholder="选择医生类型" @change="handleFilter">
              <el-option
                v-for="item in doctorTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <!-- 医生业绩表格 -->
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">医生业绩排名</h3>
      </div>
      <div class="card-body">
        <el-table
          :data="sortedDoctorData"
          style="width: 100%"
          border
          @sort-change="({ prop, order }) => handleSort(prop, order)"
        >
          <el-table-column prop="name" label="医生姓名" width="120" />
          <el-table-column prop="department" label="科室" width="100" />
          <el-table-column prop="title" label="职称" width="120" />
          <el-table-column prop="outpatientCount" label="门诊量" sortable="custom" width="100" />
          <el-table-column prop="surgeryCount" label="手术量" sortable="custom" width="100" />
          <el-table-column prop="patientSatisfaction" label="患者满意度(%)" sortable="custom" width="160">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.patientSatisfaction"
                :color="scope.row.patientSatisfaction >= 95 ? '#67C23A' : 
                        scope.row.patientSatisfaction >= 90 ? '#E6A23C' : '#F56C6C'"
              />
            </template>
          </el-table-column>
          <el-table-column prop="averageRating" label="平均评分" sortable="custom" width="120">
            <template #default="scope">
              <el-rate
                v-model="scope.row.averageRating"
                disabled
                text-color="#ff9900"
                score-template="{value}"
              />
            </template>
          </el-table-column>
          <el-table-column prop="revenue" label="医疗收入(元)" sortable="custom" width="150">
            <template #default="scope">
              {{ scope.row.revenue.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="primary" size="small" text @click="viewDoctorDetail(scope.row)">
                <el-icon><View /></el-icon>
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <!-- 科室医生分布 -->
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <h3 class="chart-title">各科室医生分布</h3>
            </div>
            <div class="chart-container">
              <div id="department-doctor-chart" class="chart"></div>
            </div>
          </div>
        </el-col>
        
        <!-- 医生类型工作量对比 -->
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <h3 class="chart-title">医生类型工作量占比</h3>
            </div>
            <div class="chart-container">
              <div id="doctor-type-workload-chart" class="chart"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <!-- 医生满意度评分 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">医生满意度与评分</h3>
        </div>
        <div class="chart-container">
          <div id="doctor-satisfaction-chart" class="chart trend-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.report-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.filter-section {
  margin-left: auto;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.chart-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.chart-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chart-container {
  padding: 20px;
}

.chart {
  height: 320px;
  width: 100%;
}

.trend-chart {
  height: 400px;
}

@media (max-width: 768px) {
  .filter-section {
    width: 100%;
    margin-top: 16px;
  }
  
  .report-header {
    flex-direction: column;
  }
}
</style> 